<template>
	<div class="pullScroll" >
		<div class="pullScrollmask" ref="editCover" @click="hideCover"></div>
		<ul class="pullScrollul" ref="editContent">
			<li v-for="(item,index) in list" @click="clickthis(item,index) " :key="index">
				<span>{{item.value}}</span>
				<i v-if="currerindex==index" class="icon njfont nj-xuanzhong" style="position: absolute;right: 1rem;margin-top: 0.5rem;"></i>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				coverShow: false,
				clickvalue: "",
				currerindex: null,
			}
		},
		computed: {

		},
		components: {},
		created() {},
		mounted() {

		},
		methods: {
			//显示模态框
			showCover() {
				this.coverShow = true;
				this.$refs.editCover.style.opacity = "0.4";
				this.$refs.editContent.style.height = this.list.length * 2 + "rem";
			},
			//隐藏模态框
			hideCover() {
				this.coverShow = false;
				this.$refs.editCover.style.opacity = "0";
				this.$refs.editContent.style.height = "0px";
			},
			clickthis(item, index) {
				this.currerindex = index
				this.clickvalue = item.code
				this.$emit('getaccountdata', this.clickvalue)
				this.hideCover()
			}
		}
	}
</script>

<style>
	.pullScroll {
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 10;
		touch-action: none;
	}

	.pullScrollmask {
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.pullScrollul {
		background-color: #fff;
		position: absolute;
		top: -2.2rem;
		width: 100%;
		transition: 0.3s;
		height: 0rem;
		max-height: 70%;
		overflow-y: auto;
	}

	.pullScrollul li {
		height: 2rem;
		border-top: 1px solid #ddd;
		line-height: 2rem;
		padding-left: 0.75rem;
	}
</style>
